<template>
  <div class = "w">
    <div class = "pro-main">
      <el-row style = "background-color: #F5F5F5;">
        <el-col>我的推荐</el-col>
      </el-row>
      <el-row style = "padding: 20px">
        <el-col>
          <span class = "span-dot"></span>
          <span>我的专属推广链接</span>
        </el-col>
        <el-col>
          <el-input style = "width: 300px"></el-input>
          <el-button type = "primary">点击复制</el-button>
        </el-col>
      </el-row>
      <el-row style = "padding: 20px">
        <el-col>
          <span class = "span-dot"></span>
          <span>通过社交应用推荐</span>
        </el-col>
        <el-col :span = "4" v-for = "(i,index) in imgUrl" class="avertcenter" :key="index">
          <el-image :src = "i.url">
            <div slot = "error" class = "image-slot">
              <i class = "el-icon-picture-outline"></i>
            </div>
          </el-image>
          <el-link type = "primary">{{i.link}}</el-link>
        </el-col>
      </el-row>
      <el-row style = "padding: 20px">
        <el-col>
          <span class = "span-dot"></span>
          <span><el-link type = "danger">活动日期：2018年5月17日-2019年9月30日</el-link></span>
        </el-col>
        <el-col class = "pro-prompt">
          <p style = "color: #409EFF">温馨提示：</p>
          <p>1、拍拍贷将采用大数据技术杜绝违规操作及作弊行为（包括但不限于：恶意注册虚假账号、恶意刷奖等），若判定为违规操作及作弊行为，拍拍贷有权取消其获奖资格。</p>
          <p>2、拍拍贷将采用大数据技术杜绝违规操作及作弊行为（包括但不限于：恶意注册虚假账号、恶意刷奖等），若判定为违规操作及作弊行为，拍拍贷有权取消其获奖资格。</p>
        </el-col>
      </el-row>
      <el-row style = "background-color: #F5F5F5;">
        <el-col>推荐详情</el-col>
      </el-row>
      <el-row style="padding: 20px">
        <el-col>
          <span>累计获得奖励 </span>
          <span style="font-size: 18px">  ￥{{money}}  </span>
          <span class="span-i"></span>
          <span>累计邀请 <span style="color: #1a87fe;font-size: 18px">{{inter}}</span> 人</span>
        </el-col>
        <el-col :span="23">
          <el-table :data="dataList" width="100%">
            <el-table-column label="被推荐人号" prop="num">
            </el-table-column>
            <el-table-column label="被推荐人状态" prop="status">
            </el-table-column>
            <el-table-column label="获得奖励券" prop="status">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
              inter:0,
              money:0,
                imgUrl: [
                    {url: '/static/igm/wx.png', link: '推荐到微信'},
                    {url: '/static/igm/web.png', link: '推荐到新浪微博'},
                    {url: '/static/igm/腾讯微博.png', link: '推荐到腾讯微博'},
                    {url: '/static/igm/QQ空间.png', link: '推荐到QQ空间'},
                    {url: '/static/igm/QQ.png', link: '推荐到腾讯QQ'},
                ],
                dataList:[
                    {
                        num:'1909280006',
                        status:'未成标',
                        reword:'未发放'
                    },
                    {
                        num:'1909280028',
                        status:'已成标',
                        reword:'已发放'
                    }
                ]
            }
        }
    }
</script>

<style scoped>
  .pro-main {
    padding: 20px;
  }
.avertcenter{
  display: flex;
}
  .span-dot {
    width: 10px;
    height: 10px;
    background-color: #8a8a8a;
    display: inline-block;
    border-radius: 50%;
  }

  .el-col {
    margin: 10px 0 10px 10px;
  }

  .el-image {
    width: 20px;
    height: 20px;
    vertical-align: top;
    margin-top: 2px;
  }

  .pro-prompt p {
    font-size: 13px;
    color: #8a8a8a;
  }
  .span-i{
    display: inline-block;
    height: 20px;
    width: 1px;
    background-color: #8a8a8a;
    margin:0 20px;
    vertical-align: bottom;
  }
</style>
